<template>
    <mt-tabbar fixed class="buts">
        <mt-tab-item @click.native="goTab('home')">
            <img slot="icon" v-if="selected == '/'" src="~/assets/image/hometwo.png">
            <img slot="icon" v-else src="~/assets/image/homeone.png">
            <span :class="(selected == '/') ? 'blue': ''">首页</span>
        </mt-tab-item>
        <mt-tab-item :href="jdUrl">
            <img slot="icon" src="~/assets/image/shopingone.png">
            <span :class="(selected == '/shopping') ? 'blue': ''">商城</span>
        </mt-tab-item>
        <mt-tab-item @click.native="goTab('wages')">
            <img slot="icon" v-if="selected == '/wages'" src="~/assets/image/wagestwo.png">
            <img slot="icon" v-else src="~/assets/image/wagesone.png">
            <span :class="(selected == '/wages') ? 'blue': ''">工资条</span>
        </mt-tab-item>
        <mt-tab-item @click.native="goTab('bill')">
            <img slot="icon" v-if="selected == '/bill'" src="~/assets/image/billtwo.png">
            <img slot="icon" v-else src="~/assets/image/billone.png">
            <span :class="(selected == '/bill') ? 'blue': ''">账单</span>
        </mt-tab-item>
        <mt-tab-item @click.native="goTab('mine')">
            <img slot="icon" v-if="selected == '/mine'" src="~/assets/image/myicotwo.png">
            <img slot="icon" v-else src="~/assets/image/myicoone.png">
            <span :class="(selected == '/mine') ? 'blue': ''">我的</span>
        </mt-tab-item>
    </mt-tabbar>
</template>
<script>
// import app from '~/assets/api/config';
export default {
    props: {
        currentTab: {
            default: '/home',
            type:String
        }
    },
    data() {
        return {
            selected: '',
            jdUrl: ''

        }
    },
    created(){
        // console.log(this.currentTab);
        this.selected=this.currentTab;
    },
    mounted() {
        /* this.jdUrl = `${
            app.API_JD_URL
        }/JDhome?platform=lxk&token=${localStorage.getItem('token')}` */
        
    },
    methods: {
        goTab(item) {
            if(item=='home'){
                this.$router.push('/');
            }else{
                this.$router.push({ name: 'index-'+item });
                this.selected='/'+item;
            };
            
        }
    }
}
</script>
<style lang="less">
    .buts {
        height: 98px;
        background: #fff;
    }
    .buts > .mint-tab-item .mint-tab-item-icon {
        width: 43px !important;
        height: 43px !important;
        margin-bottom: 6.249975px !important;
    }
    .buts .mint-tab-item {
        color: #333;
    }
    .buts .mint-tab-item-label {
        line-height: 24px !important;
        height: 24px !important;
        overflow: hidden;
    }
    .buts .mint-tab-item-label span {
        font-size: 20px !important;
        color: #303030;
    }
    .buts .blue {
        color: #303030 !important;
    }
     .buts.is-fixed {
        border-top: 1.25px solid #e1e1e1;
    }
     .buts > .mint-tab-item.is-selected {
        background: #fff !important;
        padding: 13.75px 0 !important;
    }
     .mint-navbar .mint-tab-item.is-selected {
        border-bottom: 3.75px solid #ffce00;
        color: #1d1d26;
        margin-bottom: 0;
    }
     .mint-tab-item {
        color: #a9a9ae;
    }
</style>
